<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="../../css/button.css">
    <style>
        html, body {
            text-align: center;
            vertical-align: middle;
            background-color: black;
            color: azure;
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            position: absolute;
        }

        div {
            position: absolute;
            line-height: 200px;
            font-size: 36px;
        }

        #container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #back {
            width: 100%;
            height: 100%;
        }

        #back img {
            vertical-align: top; /*解决ie浏览器背景填充时的空隙*/
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        #content {
            z-index: 2;
            width: 100%;
            height: 100%;
            text-shadow: 1px 1px 0 #CCC,
            2px 2px 0 #CCC, /* end of 2 level deep grey shadow */ 3px 3px 0 #444,
            4px 4px 0 #444,
            5px 5px 0 #444,
            6px 6px 0 #444; /* end of 4 level deep dark shadow */
        }

        #content h1 {
            padding: 15%;
        }

        #menu_button {
            z-index: 3;
            text-align: center;
            width: 100%;
            bottom: 10%;
        }


    </style>
</head>
<body>
<div id="container">
    <div id="back">
        <img src="../../img/battlebacks1/Castle1.png">
    </div>

    <div id="content">
        <h1>测试游戏封面</h1>
    </div>

    <div id="menu_button">
        <button class="button button-3d button-primary button-rounded" id="btnStart">开始游戏</button>
        <button class="button button-3d button-action button-rounded" id="btnContinue">继续游戏</button>
        <button class="button button-3d button-rounded" id="btnSetting">游戏设置</button>
        <button class="button button-3d button-rounded" id="btnAbout">关于我们</button>
    </div>
</div>


<script>

    $$$.playTitleMusic();

    document.getElementById("btnStart").onclick = function () {
        $$$.pageCurrent.hide();
        $$$.startNewGame();
    }

    document.getElementById("btnContinue").onclick = function () {
        $$$.fadeOutMusic();
        $$$.pageGo("game-load");
    }

    document.getElementById("btnSetting").onclick = function () {
        $$$.fadeOutMusic();
        $$$.pageGo("game-setting");
    }

    document.getElementById("btnAbout").onclick = function () {
        $$$.fadeOutMusic();
        $$$.pageGo("game-about");
    }
</script>

</body>
</html>